// 页面鉴权
checkLogin()
// 退出登录
logout()

// 用户名
// renderUser()

// 显示弹框
const modalDom = document.querySelector('#modal')
const modal = new bootstrap.Modal(modalDom)
const tbody = document.querySelector('tbody')
// 定义标识
let rowId

async function getList() {
    // 获取学生数据
    const { data } = await axios.get('/students')
    // 学员总数
    document.querySelector('.total').innerHTML = data.length

    // 页面数据渲染
    tbody.innerHTML = data.map(item => {
        // console.log(res);
        return `
            <tr>
                <td>${item.name}</td>
                <td>${item.age}</td>
                <td>${item.gender ? '女' : '男'}</td>
                <td>第${item.group}组</td>
                <td>${item.hope_salary}</td>
                <td>${item.salary}</td>
                <td>${item.province + item.city + item.area}</td>
                <td>
                    <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id=${item.id}></i></a>
                    <a href="javascript:;" class="text-danger"><i class="bi bi-trash" data-id=${item.id}></i></a>
                </td>
            </tr>
        `
    }).join('')


    // 监听对话框的显示和隐藏 -> 绑定事件   事件类型  
    // document.querySelector('#openModal').addEventListener('click', function () {
    //     // 显示对话框
    //     modal.show()
    // })
    // modalDom.addEventListener('show.bs.modal', e => {
    //     console.log('显示')
    // })
    // modalDom.addEventListener('hidden.bs.modal', e => {
    //     console.log('隐藏')
    // })

    // 数据增删改查

    // tbody.addEventListener('click', function (e) {
    //     // 删除
    //     if (e.target.classList.contains('bi-trash')) {
    //         rowId = e.target.dataset.id
    //         axios.delete(`/students/${rowId}`).then(res=>{
    //             console.log(res);
    //             // return

    //         })
    //     }
    // })


    // 添加
}
getList()

// 初始化省市区

const form = document.querySelector('#form')
const proSelect = document.querySelector('[name="province"]')
const citySelect = document.querySelector('[name="city"]')
const areaSelect = document.querySelector('[name="area"]')
let p
async function initSelect() {
    // 显示省份
    const { list } = await axios.get('/api/province')
    const html1 = list.map(item => {
        return `
            <option value="${item}">${item}</option>
        `
    }).join('')
    proSelect.innerHTML = '<option>--省份--</option>' + html1
    // 切换省份 显示对应城市
    proSelect.addEventListener('change', async function (e) {
        // 获取切换到省份
        p = e.target.value
        const { list } = await axios.get(`/api/city?pname=${e.target.value}`)
        const html2 = list.map(item => {
            return `
                <option value="${item}">${item}</option>
            `
        }).join('')
        citySelect.innerHTML = '<option>--城市--</option>' + html2
        // 切换省份时，地区为默认
        areaSelect.innerHTML = '<option>--地区--</option>'
    })
    // 切换城市 显示对应地区
    citySelect.addEventListener('change', async function (e) {
        const { list } = await axios.get(`/api/area?pname=${p}&cname=${e.target.value}`)
        const html3 = list.map(item => {
            return `
                <option value="${item}">${item}</option>
            `
        }).join('')
        areaSelect.innerHTML = '<option>--地区--</option>' + html3
    })
}
initSelect()


// 添加业务
// const btn = document.querySelector('#openModal')
document.querySelector('#openModal').addEventListener('click', async function () {
    // 给定义的标识赋值
    rowId = null

    // 显示对话框
    modal.show()
})

// 编辑
tbody.addEventListener('click', async function (e) {
    // 判断事件源
    if (e.target.classList.contains('bi-pen')) {
        // 给定义的标识赋值
        rowId = e.target.dataset.id
        // 数据回显
        // 1.数据请求 拿到点击的数据
        const { data } = await axios.get(`/students/${rowId}`)
        // 2.给标签绑定事件
        // 2.1给有规则的表单进行赋值（回显)
        // 2.2给性别进行赋值(回显)
        const idArr = ['name','age','group','gender','hope_salary','salary']
        idArr.forEach(item=>{
            // console.log(document.querySelector(`[name=${item}]`));
            // document.querySelector(`[name=${item}]`).value = data[item]
            form[item].value = data[item]
        })
        //2.3给籍贯赋值(回显)
        const {province,city,area} = data
        // 回显省份
        proSelect.value = province
        // 回显城市
        const {list:list1} = await axios.get(`/api/city?pname=${province}`)
        const html2 = await list1.map(item=>{
            return `
            <option value="${item}">${item}</option>
            `
        }).join('')
        citySelect.innerHTML = '<option>--城市--</option>' + html2
        // 回显
        // 省市区下拉菜单回显,首先下拉菜单有数据（省市区），给对应的标签设置value值
        citySelect.value = city
        // 回显地区
        const {list:list2} = await axios.get(`/api/area?pname=${province}&cname=${city}`)
        const html3 = list2.map(item=>{
            return `
            <option value="${item}">${item}</option>
            `
        }).join('')
        areaSelect.innerHTML = '<option>--地区--</option>' + html3
        // 回显
        // 省市区下拉菜单回显,首先下拉菜单有数据（省市区），给对应的标签设置value值
        areaSelect.value = area

        // 显示对话框
        modal.show()
    }
    // 判断是否为删除
    if (e.target.classList.contains('bi-trash')) {
        const id = e.target.dataset.id
        const flag = confirm('是否确定删除?')
        if (flag) {
            // 删除数据 
            await axios.delete(`/students/${id}`)
        
            // 提示
            showToast('删除成功')
            // 渲染
            getList()
        }
    }
})

// 点击确定按钮 添加和编辑
document.querySelector('#submit').addEventListener('click', async function () {
    // 判断是添加还是编辑
    if (rowId) {
        // 编辑
        // 1.收集数据
        const data = serialize(form, { hash: true, empty: true })
        // 2.处理数据
        data.age = +data.age
        data.gender = +data.gender
        data.group = +data.group
        data.salary = +data.salary
        data.hope_salary = +data.hope_salary
        // 3.提交数据
        await axios.put(`/students/${rowId}`, data)
        // 4.提示用户
        showToast('编辑成功')
        // 5.重新渲染
        getList()
    } else {
        // 添加
        // 1.收集数据
        const data = serialize(form, { hash: true, empty: true })
        // 2.处理数据
        data.age = +data.age
        data.gender = +data.gender
        data.group = +data.group
        data.salary = +data.salary
        data.hope_salary = +data.hope_salary
        // 3.提交数据
        await axios.post('/students', data)
        // 4.提示用户
        showToast('添加成功')
        // 5.重新渲染
        getList()
    }

    // 隐藏对话框
    modal.hide()
})

// 监听对话框是否显示 显示修改对话框标题
modalDom.addEventListener('show.bs.modal', e => {
    document.querySelector('.modal-title').innerHTML = rowId ? '编辑学员信息' : '添加学员信息'
})
// 监听对话框是否隐藏 隐藏就清空表单
modalDom.addEventListener('hide.bs.modal', e => {
    form.reset()
})

